<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>多功能文件夹管理系统</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/layui@2.6.8/dist/css/layui.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <script src="https://cdn.jsdelivr.net/npm/layui@2.6.8/dist/layui.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: #f5f7fa;
            color: #333;
        }
        .container {
            display: flex;
            min-height: 100vh;
            padding: 20px;
            gap: 20px;
        }
        .header {
            background: linear-gradient(135deg, #1e88e5 0%, #0d47a1 100%);
            color: white;
            padding: 20px;
            border-radius: 8px;
            margin-bottom: 20px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        }
        .header h1 {
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 24px;
        }
        .panel {
            background: white;
            border-radius: 8px;
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
            overflow: hidden;
        }
        .panel-header {
            padding: 15px;
            background: #f8f9fa;
            border-bottom: 1px solid #eee;
            font-weight: 600;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .file-tree {
            flex: 0 0 280px;
            display: flex;
            flex-direction: column;
        }
        .file-list {
            flex: 1;
            display: flex;
            flex-direction: column;
            min-width: 0;
        }
        .file-preview {
            flex: 0 0 420px;
            display: flex;
            flex-direction: column;
        }
        .file-content {
            flex: 1;
            padding: 15px;
            overflow: auto;
        }
        .drawer {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            height: 40px;
            background: #0d47a1;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            z-index: 1000;
            transition: height 0.3s ease;
            border-top-left-radius: 8px;
            border-top-right-radius: 8px;
        }
        .drawer.expanded {
            height: 200px;
        }
        .drawer-content {
            padding: 20px;
            display: none;
            color: #333;
        }
        .drawer.expanded .drawer-content {
            display: block;
        }
        .file-item {
            display: flex;
            align-items: center;
            padding: 10px 15px;
            border-bottom: 1px solid #eee;
            cursor: pointer;
            transition: background 0.2s;
        }
        .file-item:hover {
            background: #f0f7ff;
        }
        .file-icon {
            margin-right: 10px;
            width: 24px;
            text-align: center;
            color: #4a89dc;
        }
        .file-info {
            flex: 1;
            min-width: 0;
        }
        .file-name {
            font-weight: 500;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .file-desc {
            font-size: 12px;
            color: #888;
        }
        .file-actions {
            display: flex;
            gap: 10px;
        }
        .file-actions button {
            padding: 4px 8px;
            font-size: 12px;
        }
        .toolbar {
            padding: 15px;
            background: #f8f9fa;
            border-bottom: 1px solid #eee;
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
        }
        .breadcrumb {
            padding: 15px;
            background: #f8f9fa;
            border-bottom: 1px solid #eee;
            display: flex;
            align-items: center;
            gap: 5px;
        }
        .breadcrumb a {
            color: #1e88e5;
            text-decoration: none;
        }
        .breadcrumb a:hover {
            text-decoration: underline;
        }
        .file-content textarea {
            width: 100%;
            height: 100%;
            min-height: 300px;
            padding: 15px;
            border: 1px solid #ddd;
            border-radius: 4px;
            resize: none;
            font-family: 'Consolas', monospace;
        }
        .quick-folders {
            display: flex;
            gap: 15px;
            padding: 15px;
            flex-wrap: wrap;
        }
        .quick-folder {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 10px;
            background: #f0f7ff;
            border-radius: 6px;
            width: 100px;
            cursor: pointer;
            transition: transform 0.2s;
        }
        .quick-folder:hover {
            transform: translateY(-3px);
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        }
        .quick-folder i {
            font-size: 24px;
            color: #4a89dc;
            margin-bottom: 8px;
        }
        .quick-folder span {
            font-size: 12px;
            text-align: center;
        }
        .search-box {
            margin: 15px;
        }
        @media (max-width: 1200px) {
            .container {
                flex-wrap: wrap;
            }
            .file-tree, .file-preview {
                flex: 1 1 300px;
            }
        }
    </style>
</head>
<body>
    <div class="header">
        <h1><i class="fas fa-folder"></i> 多功能文件夹管理系统</h1>
    </div>

    <div class="container">
        <!-- 左侧文件树 -->
        <div class="panel file-tree">
            <div class="panel-header">
                <span>文件夹结构</span>
                <button class="layui-btn layui-btn-primary layui-btn-sm"><i class="fas fa-sync-alt"></i> 刷新</button>
            </div>
            <div class="file-content">
                <ul id="fileTree">
                    <!-- 树形结构会由JS生成 -->
                </ul>
            </div>
        </div>

        <!-- 中间文件列表 -->
        <div class="panel file-list">
            <div class="breadcrumb">
                <a href="#">根目录</a> <i class="fas fa-chevron-right" style="font-size: 10px;"></i>
                <a href="#">项目</a> <i class="fas fa-chevron-right" style="font-size: 10px;"></i>
                <a href="#">文档</a>
            </div>
            <div class="toolbar">
                <button class="layui-btn layui-btn-sm"><i class="fas fa-plus"></i> 新建</button>
                <button class="layui-btn layui-btn-sm layui-btn-normal"><i class="fas fa-upload"></i> 上传</button>
                <button class="layui-btn layui-btn-sm layui-btn-danger"><i class="fas fa-trash"></i> 删除</button>
                <div class="layui-input-inline" style="margin-left: auto;">
                    <input type="text" placeholder="搜索文件..." class="layui-input layui-input-sm">
                </div>
            </div>
            <div class="file-content">
                <div class="file-item">
                    <div class="file-icon"><i class="far fa-file-alt"></i></div>
                    <div class="file-info">
                        <div class="file-name">项目计划书.docx</div>
                        <div class="file-desc">128 KB · 修改时间: 2023-06-15 10:30</div>
                    </div>
                    <div class="file-actions">
                        <button class="layui-btn layui-btn-xs">编辑</button>
                        <button class="layui-btn layui-btn-xs layui-btn-normal">下载</button>
                    </div>
                </div>
                <div class="file-item">
                    <div class="file-icon"><i class="far fa-file-excel"></i></div>
                    <div class="file-info">
                        <div class="file-name">预算报表.xlsx</div>
                        <div class="file-desc">356 KB · 修改时间: 2023-06-18 14:22</div>
                    </div>
                    <div class="file-actions">
                        <button class="layui-btn layui-btn-xs">编辑</button>
                        <button class="layui-btn layui-btn-xs layui-btn-normal">下载</button>
                    </div>
                </div>
                <div class="file-item">
                    <div class="file-icon"><i class="far fa-file-pdf"></i></div>
                    <div class="file-info">
                        <div class="file-name">项目规范.pdf</div>
                        <div class="file-desc">1.2 MB · 修改时间: 2023-06-20 09:15</div>
                    </div>
                    <div class="file-actions">
                        <button class="layui-btn layui-btn-xs">查看</button>
                        <button class="layui-btn layui-btn-xs layui-btn-normal">下载</button>
                    </div>
                </div>
                <div class="file-item">
                    <div class="file-icon"><i class="far fa-image"></i></div>
                    <div class="file-info">
                        <div class="file-name">架构图.png</div>
                        <div class="file-desc">2.4 MB · 修改时间: 2023-06-21 16:45</div>
                    </div>
                    <div class="file-actions">
                        <button class="layui-btn layui-btn-xs">预览</button>
                        <button class="layui-btn layui-btn-xs layui-btn-normal">下载</button>
                    </div>
                </div>
                <div class="file-item">
                    <div class="file-icon"><i class="far fa-file-code"></i></div>
                    <div class="file-info">
                        <div class="file-name">index.html</div>
                        <div class="file-desc">8 KB · 修改时间: 2023-06-22 11:30</div>
                    </div>
                    <div class="file-actions">
                        <button class="layui-btn layui-btn-xs">编辑</button>
                        <button class="layui-btn layui-btn-xs layui-btn-normal">下载</button>
                    </div>
                </div>
            </div>
        </div>

        <!-- 右侧文件预览 -->
        <div class="panel file-preview">
            <div class="panel-header">
                <span>文件预览</span>
                <div>
                    <button class="layui-btn layui-btn-xs layui-btn-primary">只读</button>
                    <button class="layui-btn layui-btn-xs">编辑</button>
                </div>
            </div>
            <div class="file-content">
                <textarea>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>示例文件</title>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            line-height: 1.6;
            color: #333;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
        }
        h1 {
            color: #1e88e5;
            border-bottom: 2px solid #eee;
            padding-bottom: 10px;
        }
        .code {
            background-color: #f8f9fa;
            border-left: 4px solid #1e88e5;
            padding: 15px;
            font-family: 'Consolas', monospace;
            overflow: auto;
        }
    </style>
</head>
<body>
    <h1>项目说明文档</h1>
    <p>这是一个示例的HTML文件内容，您可以在预览区域查看和编辑文本文件。</p>
    
    <h2>项目特点</h2>
    <ul>
        <li>响应式设计，适配多种屏幕尺寸</li>
        <li>简洁直观的用户界面</li>
        <li>支持多种文件操作</li>
    </ul>
    
    <h2>代码示例</h2>
    <div class="code">
        function helloWorld() {
            console.log("Hello, World!");
            return true;
        }
    </div>
    
    <p>使用此系统，您可以方便地管理您的文件和文件夹。</p>
</body>
</html>
                </textarea>
            </div>
            <div class="toolbar">
                <button class="layui-btn layui-btn-sm">保存</button>
                <button class="layui-btn layui-btn-sm layui-btn-primary">撤销</button>
                <button class="layui-btn layui-btn-sm layui-btn-normal">搜索</button>
            </div>
        </div>
    </div>

    <!-- 底部常用文件夹抽屉 -->
    <div class="drawer" id="drawer">
        <i class="fas fa-chevron-up" id="drawerIcon"></i>
        <span style="margin-left: 10px;">常用文件夹</span>
        <div class="drawer-content">
            <div class="quick-folders">
                <div class="quick-folder">
                    <i class="fas fa-folder"></i>
                    <span>项目文档</span>
                </div>
                <div class="quick-folder">
                    <i class="fas fa-folder"></i>
                    <span>图片资源</span>
                </div>
                <div class="quick-folder">
                    <i class="fas fa-folder"></i>
                    <span>设计稿</span>
                </div>
                <div class="quick-folder">
                    <i class="fas fa-folder"></i>
                    <span>代码库</span>
                </div>
                <div class="quick-folder">
                    <i class="fas fa-folder"></i>
                    <span>会议记录</span>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 初始化LayUI模块
        layui.use(['tree', 'layer'], function(){
            var tree = layui.tree;
            var layer = layui.layer;

            // 渲染文件夹树形结构
            tree.render({
                elem: '#fileTree',
                data: [{
                    title: '根目录',
                    id: 1,
                    children: [{
                        title: '项目文档',
                        id: 2,
                        children: [{
                            title: '设计稿',
                            id: 3
                        },{
                            title: '需求文档',
                            id: 4
                        }]
                    }, {
                        title: '图片资源',
                        id: 5,
                        children: [{
                            title: '产品图',
                            id: 6
                        },{
                            title: '图标',
                            id: 7
                        }]
                    }, {
                        title: '代码库',
                        id: 8,
                        children: [{
                            title: '前端',
                            id: 9
                        },{
                            title: '后端',
                            id: 10
                        }]
                    }]
                }],
                click: function(node){
                    console.log(node);
                }
            });

            // 抽屉功能
            var drawer = document.getElementById('drawer');
            var drawerIcon = document.getElementById('drawerIcon');
            
            drawer.addEventListener('click', function(e) {
                if (e.target === drawer || e.target === drawerIcon || e.target.tagName === 'SPAN') {
                    drawer.classList.toggle('expanded');
                    drawerIcon.classList.toggle('fa-chevron-up');
                    drawerIcon.classList.toggle('fa-chevron-down');
                }
            });
        });
    </script>
</body>
</html>